<template>
  <div class="img-zoom-container">
    <!-- 左侧放大镜区域 -->
    <div class="previewWrap">
      <!--放大镜效果-->
      <div class="preview">
        <div
          class="jqzoom"
          ref="jqZoom"
          @mousemove="handleZoom($event)"
          @mouseleave="handleMouseLeave"
        >
          <img :src="currentImg" />
          <div class="mask" ref="mask" v-show="isShowMaskAndBigImg"></div>
        </div>
        <div class="maxbox" v-show="isShowMaskAndBigImg">
          <img :src="currentImg" ref="bigImg" />
        </div>
      </div>
      <!--下方的缩略图-->
      <div class="specScroll">
        <!--左按钮-->
        <a
          @click.prevent="swiperPrev"
          :class="{
            'can-not-click': activeIndex === 1,
            prev: true
          }"
          >&lt;</a
        >
        <!-- 中间可滑动区域 -->
        <div class="items">
          <div class="itemsCon">
            <div class="swiper swiper-no-swiping">
              <div class="swiper-wrapper">
                <div
                  class="swiper-slide"
                  v-for="(item, index) in skuImageList"
                  :key="index"
                >
                  <img
                    @click="onImgClick(item.imgUrl, index)"
                    :src="item.imgUrl"
                    alt=""
                    :class="{ active: currentIndex === index }"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--右按钮-->
        <a
          @click.prevent="swiperNext"
          :class="{
            'can-not-click': activeIndex * 3 >= skuImageList.length,
            next: true
          }"
          >&gt;</a
        >
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper' // 引入swiper依赖
import { mapGetters } from 'vuex'
export default {
  name: 'ImgZoom',
  data () {
    return {
      // swiper实例
      mySwiper: null,
      // 是否显示蒙版和大图图片
      isShowMaskAndBigImg: false,
      // 当前选择的缩略图图片
      currentIndex: 0,
      // 当前选择的缩略图照片
      currentImage: '',
      // 轮播图当前页数
      activeIndex: 1
    }
  },
  props: {},
  components: {},
  computed: {
    ...mapGetters('detail', [
      'skuInfo',
      'categoryView',
      'skuImageList',
      'shopAttr'
    ]),
    // 当前照片,最左边的那个大图照片,刚进页面肯定是数组的第0项,后面点击哪个缩略图,就动态改变
    currentImg () {
      if (this.currentImage) {
        return this.currentImage
      } else if (this.skuImageList.length !== 0) {
        return this.skuImageList[0].imgUrl
      } else {
        return ''
      }
    }
  },
  watch: {
    skuImageList: {
      handler: function () {
        this.$nextTick(() => {
          this.mySwiper = new Swiper('.swiper', {
            slidesPerView: 3
          })
        })
      }
    }
  },
  created () {},
  mounted () {},
  methods: {
    // 点击左箭头
    swiperPrev () {
      // 判断是否在轮播图第一页
      if (this.activeIndex === 1) {
        return ''
      }
      this.mySwiper.slidePrev()
      this.activeIndex--
    },
    // 点击右箭头
    swiperNext () {
      // 判断是否到了轮播图最后一页
      if (this.activeIndex * 3 >= this.skuImageList.length) {
        return ''
      }
      this.mySwiper.slideNext()
      this.activeIndex++
    },
    // 处理鼠标在大图上的拖动
    /*     逻辑: 1.监听鼠标滑动事件
          2.鼠标移入添加遮罩蒙版
          3.设置left,top属性
          4.鼠标移入,把大图也显示
          5.大图的left,top是要设负值
          6.要注意给灰色蒙版mask加上points-event: none,不然鼠标的offsetx,offsety属性会相对的是蒙版的 */
    handleZoom (event) {
      this.isShowMaskAndBigImg = true
      const { offsetX, offsetY } = event
      const maskDiv = this.$refs.mask
      const bigImgDiv = this.$refs.bigImg
      const jqZoomDiv = maskDiv.parentNode
      const jqZoomDivWidth = jqZoomDiv.offsetWidth
      const jqZoomDivHeight = jqZoomDiv.offsetHeight
      let left = offsetX - maskDiv.offsetWidth / 2
      let top = offsetY - maskDiv.offsetHeight / 2
      if (left < 0) {
        left = 0
      }
      if (top < 0) {
        top = 0
      }
      const totalWidth = offsetX + maskDiv.offsetWidth / 2
      const totalHeight = offsetY + maskDiv.offsetHeight / 2
      if (totalWidth > jqZoomDivWidth) {
        left = jqZoomDivWidth - maskDiv.offsetWidth
      }
      if (totalHeight > jqZoomDivHeight) {
        top = jqZoomDivHeight - maskDiv.offsetHeight
      }

      maskDiv.style.left = `${left}px`
      maskDiv.style.top = `${top}px`
      // 比例为大图在父div容器可以移动的距离除以蒙版在小图可以移动的距离
      const ratio =
        (bigImgDiv.offsetWidth - bigImgDiv.parentNode.offsetWidth) /
        (jqZoomDivWidth - maskDiv.offsetWidth)
      const bigImgLeft = left * ratio
      const bigImgTop = top * ratio
      // 大图移动
      bigImgDiv.style.left = `-${bigImgLeft}px`
      bigImgDiv.style.top = `-${bigImgTop}px`
    },
    // 处理鼠标移开dom
    handleMouseLeave () {
      this.isShowMaskAndBigImg = false
    },
    // 点击小图
    onImgClick (imgUrl, index) {
      this.currentImage = imgUrl
      this.currentIndex = index
    }
  }
}
</script>

<style scoped lang="less">
.img-zoom-container {
  .previewWrap {
    float: left;
    width: 400px;
    position: relative;
    .preview {
      width: 400px;
      height: 400px;
      border: 1px solid #dfdfdf;
      .jqzoom {
        cursor: pointer;
        width: 400px;
        height: 400px;
        position: relative;
        img {
          width: 100%;
        }
        .mask {
          width: 200px;
          height: 200px;
          background: rgba(255, 255, 255, 0.5);
          position: absolute;
          border: 1px solid #ddd;
          pointer-events: none;
        }
      }
      .maxbox {
        width: 400px;
        height: 400px;
        position: absolute;
        left: 420px;
        top: 0px;
        overflow: hidden;
        z-index: 20;
        border: 1px solid #ddd;
        img {
          position: absolute;
          width: 800px;
          height: 800px;
          display: block;
        }
      }
    }
    .specScroll {
      margin-top: 5px;
      width: 400px;
      overflow: hidden;
      .prev,
      .next {
        text-align: center;
        width: 10px;
        height: 54px;
        line-height: 54px;
        border: 1px solid #ccc;
        background: #ebebeb;
        cursor: pointer;
        &.can-not-click {
          cursor: not-allowed !important;
          background: #ccc !important;
        }
      }
      .prev {
        float: left;
        margin-right: 4px;
      }
      .next {
        float: right;
      }
      .items {
        float: left;
        position: relative;
        width: 372px;
        height: 56px;
        overflow: hidden;
        .itemsCon {
          position: absolute;
          width: 100%;
          height: 56px;
          left: 0;
          .swiper {
            height: 100%;
            width: 100%;
            img {
              text-align: center;
              border: 1px solid #ccc;
              padding: 2px;
              width: 50px !important;
              height: 50px;
              margin-right: 20px;
              cursor: pointer;
              &.active {
                border: 1px solid pink;
              }
            }
          }
        }
      }
    }
  }
}
</style>
